<template>
  <div class="wrap">
    <head-bar />
    <ctrls :pageInfo="pageInfo" v-show="pad" :pad="pad" @next="next" />
    <div class="page" :style="{opacity:pageShow.home?1:0,'z-index':pageShow.home?'2':'1'}">
      <page-home />
    </div>
    <div class="page" :style="{opacity:pageShow.news?1:0,'z-index':pageShow.news?'2':'1'}">
      <page-news />
    </div>
    <div class="page" :style="{opacity:pageShow.detail?1:0,'z-index':pageShow.detail?'2':'1'}">
      <page-detail />
    </div>
    <div class="page" :style="{opacity:pageShow.map?1:0,'z-index':pageShow.map?'2':'1'}">
      <page-map @next="next" />
    </div>
  </div>
</template>

<script>
import Home from '@/components/Home'
import News from '@/components/News'
import Detail from '@/components/Detail'
import Map from '@/components/Map'
// import { mapActions } from 'vuex'

const initPages = {
  home: false,
  news: false,
  detail: false,
  map: false
}
export default {
  name: 'Main',
  data () {
    return {
      pad: false,
      pageInfo: {},
      curRouter: 'map',
      pageShow: {
        home: false,
        news: false,
        detail: false,
        map: false
      }

    }
  },
  components: {
    pageHome: Home,
    pageNews: News,
    pageDetail: Detail,
    pageMap: Map
  },
  mounted () {
    /**
     * deviceType
     * pad 显示按钮控制
     * tv 不显示按钮控制
     */
    const deviceType = this.$route.query.deviceType
    this.pad = deviceType === 'pad'
    const that = this
    that.$store.commit('setCurRouter', that.curRouter)
    that.pageShow = Object.assign(initPages, {
      [that.curRouter]: true
    })

    // 触发autoslde方法
    // that.getAutoSlide()
  },
  methods: {
    // ...mapActions([
    //   'getAutoSlide' // 将 `this.getAutoSlide()` 映射为 `this.$store.dispatch('getAutoSlide')`
    // ]),
    next (params) {
      const that = this
      const { path } = params
      let curPosition = path
      that.curRouter = curPosition
      that.pageShow = Object.assign(initPages, {
        [curPosition]: true
      })
      Object.keys(initPages).forEach(key => {
        // console.log(initPages[key], key)
        that.pageShow[key] = key === curPosition
      })
      that.$store.commit('setCurRouter', that.curRouter)

      // 设置头部信息
      const headerInfo = {
        name: that.$store.state['page' + curPosition].name,
        weatherInfo: {
          weatherType: that.$store.state['page' + curPosition].weatherType,
          weartherContent: that.$store.state['page' + curPosition].weartherContent,
          temperature: that.$store.state['page' + curPosition].temperature
        },
        show: curPosition !== 'map'
      }
      // console.log('headerInfo', headerInfo)
      that.$store.commit('setHeaderInfo', headerInfo)
      // console.log(curPosition, that.pageShow, initPages)
    }
  }
}
</script>

<style lang="scss" scoped>
  .page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
  }
</style>
